<template>
  <div>
    <el-form :inline="true" :model="searchForm" ref="formRef">
      <el-form-item label="赛事名称" prop="name">
        <el-input v-model="searchForm.name" placeholder="请输入赛事名称" />
      </el-form-item>
      <el-form-item label="赛事状态" prop="status">
        <el-select v-model="searchForm.status" placeholder="请选择赛事状态">
          <el-option v-for="item in competitionStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="$router.push('/competition/competitionOperate?type=0&id=0')"
      style="margin-bottom: 10px">新增赛事</el-button>
    <el-table :data="state.tableData" border style="width: 100%">
      <el-table-column prop="raceName" label="赛事名称" width="180" />
      <el-table-column label="比赛时间" width="180">
        <template #default="scope">
          {{ formatDate(new Date(scope.row.matchStartDate), "YYYY-mm-dd") }}
        </template>
      </el-table-column>
      <el-table-column prop="option" label="赛制">
        <template #default="scope">
          {{ RaceSystemEnumText[scope.row.raceSystem as RaceSystemEnum] }}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="赛事类型">
        <template #default="scope">
          {{ RaceTypeEnumText[scope.row.raceType as RaceTypeEnum] }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="赛事状态">
        <template #default="scope">
          {{ RaceStatusEnumText[scope.row.raceStatus as RaceStatusEnum] }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="260">
        <template #default="scope">
          <el-button v-show="scope.row.raceStatus === RaceStatusEnum.PUBLISHED ||
            scope.row.raceStatus === RaceStatusEnum.REGISTER
            " @click="
    $router.push(
      '/competition/competitionOperate?type=1&id=' +
      `${scope.row.raceId}`
    )
    ">编辑</el-button>
          <el-button @click="
            $router.push(
              '/competition/competitionOperate?type=2&id=' +
              `${scope.row.raceId}`
            )
            ">查看</el-button>
          <el-button @click="
            $router.push(
              '/competition/competitionSet?id=' +
              `${scope.row.raceId}` +
              '&raceName=' +
              `${scope.row.raceName}`
            )
            ">赛事设置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="state.total" :limit="state.pageSize" :page-change="PageChange" />
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { getRaceList } from "@/api/match";
import { formatDate } from "@/utils/formatTime";
import {
  RaceStatusEnumText,
  RaceSystemEnumText,
  RaceTypeEnumText,
} from "../config/index";
import { RaceStatusEnum, RaceSystemEnum, RaceTypeEnum } from "../config/enum";
import { ITableColumnResponse } from "@/api/match/type";
import Pagination from "@/components/pagination/index.vue";

const formRef = ref<FormInstance>();
const searchForm = reactive({
  name: "",
  status: "",
});
const state = reactive<{
  total: number;
  pageNum: number;
  pageSize: number;
  tableData: ITableColumnResponse[];
}>({
  total: 10,
  pageNum: 1,
  pageSize: 10,
  tableData: [],
});

const competitionStatusOptions = computed(() => {
  return Object.keys(RaceStatusEnumText).map((key) => {
    return {
      label: RaceStatusEnumText[key as RaceStatusEnum],
      value: key,
    };
  });
});

// 分页
const PageChange = (page: number) => {
  state.pageNum = page;
  getTableData();
};

const getTableData = () => {
  getRaceList({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
    extraParamMap: {
      raceName: searchForm.name,
      raceStatus: searchForm.status,
    },
  }).then((res) => {
    state.tableData = res.data.rows || [];
    state.total = res.data.total || 0;

  });
};
getTableData();

const onSubmit = () => {
  getTableData();
};
const onReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  searchForm.name = "";
  searchForm.status = "";
  getTableData();
};
</script>

<style lang="scss" scoped>
.el-form .el-form-item:last-of-type {
  margin-bottom: 18px !important;
}
</style>
